<template>
    <div class="content">
        <div class="top">
            <GreenBtn>新增</GreenBtn>
        </div>
        <div class="bottom">
            <el-tabs type="border-card">
                <el-tab-pane label="人员">
                    <div class="top">
                        <ul>
                            <li>
                                <SelectIpt>
                                    <p>是否通知</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>通知对象</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <TextIpt>
                                    <p>证件号</p>
                                </TextIpt>
                            </li>
                            <li>
                                <TextIpt>
                                    <p>姓名</p>
                                </TextIpt>
                            </li>
                            <li>
                                <BlueBtn>查询</BlueBtn>
                            </li>
                            <li>
                                <BlueBtn>批量通知配置</BlueBtn>
                            </li>
                            <li>
                                <RedBtn>批量删除</RedBtn>
                            </li>
                        </ul>

                    </div>
                    <div class="table">
                        <el-table :data="tableData" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="建筑">
                    <div class="top second-top">
                        <ul>
                            <li>
                                <SelectIpt>
                                    <p>是否通知</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>通知对象</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>楼栋</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>单元</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>楼层</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>房间号</p>
                                </SelectIpt>
                            </li>

                        </ul>
                        <BlueBtn>查询</BlueBtn>
                        <BlueBtn>批量通知配置</BlueBtn>
                        <RedBtn>批量删除</RedBtn>

                    </div>
                    <div class="table">
                        <el-table :data="tableData" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="标签">
                    <div class="top">
                        <ul>
                            <li>
                                <SelectIpt>
                                    <p>是否通知</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>通知对象</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <SelectIpt>
                                    <p>标签</p>
                                </SelectIpt>
                            </li>
                            <li>
                                <BlueBtn>查询</BlueBtn>
                            </li>
                            <li>
                                <BlueBtn>批量通知配置</BlueBtn>
                            </li>
                            <li>
                                <RedBtn>批量删除</RedBtn>
                            </li>
                        </ul>

                    </div>
                    <div class="table">
                        <el-table :data="tableData" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import TextIpt from '@/components/TextIpt.vue';
import SelectIpt from '@/components/SelectIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
import RedBtn from '@/components/RedBtn.vue';
export default {
    components: {
        GreenBtn,
        TextIpt,
        SelectIpt,
        BlueBtn,
        RedBtn
    },
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            multipleSelection: [],
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>

<style scoped>
.second-top li {
    margin-bottom: 20px;
}

.bottom {
    margin-top: 10px;
}
</style>